<template>
  <div class="choose">
    <el-card class="box-card">
      <div class="chose-time">
        <span>起报日期</span>
        <!-- <div class="block"> -->
        <el-date-picker
          v-model="date"
          type="date"
          placeholder="选择日期"
          class="start-time"
        >
        </el-date-picker>
        <!-- </div> -->
      </div>
      <div class="chose-count">
        <span>预报时次</span>
        <el-select
          v-model="yunBaoCount"
          placeholder="请选择"
          class="start-time"
        >
          <el-option
            v-for="item in yubaoCountoptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>

      <div class="chose-duration">
        <span>预报时效</span>
        <div>
          <el-select v-model="startTime" clearable placeholder="请选择">
            <el-option
              v-for="item in yubaoDurationOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
          <el-select
            v-model="endTime"
            clearable
            placeholder="请选择"
            class="duration"
          >
            <el-option
              v-for="item in yubaoEndDuration"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
      </div>
      <div class="data-type">
        <span>数据类型</span>
        <div>
          <el-radio v-model="dataTypeRadio" label="1">
            <span>智能网格</span>
          </el-radio>
          <el-radio v-model="dataTypeRadio" label="2">
            <span>EC</span>
          </el-radio>
        </div>
      </div>
      <div class="show-map">
        <span>地图展示</span>
        <div>
          <el-radio v-model="mapShowOfType" label="1">
            <span>网格</span>
          </el-radio>
          <el-radio v-model="mapShowOfType" label="2">
            <span>色斑</span>
          </el-radio>
        </div>
      </div>
      <div class="query">
        <el-button type="primary" @click="query">查询</el-button>
      </div>
    </el-card>
  </div>
</template>

<script>
import { getYuBaoInfo,getFactsGrid } from "@/api/zhjcright";
import moment from "moment";
export default {
  name: "YuBao",
  components: {
    // ChooseTiltle,
  },
  data() {
    return {
      date: new Date(2024, 4, 20, 0, 0),
      yubaoCountoptions: [
        {
          value: "08",
          label: "08",
        },
        {
          value: "20",
          label: "20",
        },
      ],
      yunBaoCount: "20",
      //预报时效
      startTime: "1天",
      //
      endTime: "012",
      dataTypeRadio: "1",
      mapShowOfType: "1",
      yubaoDurationOptions: [
        {
          value: "1天",
          label: "1天",
          children: [
            {
              value: "003",
              label: "003",
            },
            {
              value: "006",
              label: "006",
            },
            {
              value: "009",
              label: "009",
            },
            {
              value: "012",
              label: "012",
            },
            {
              value: "015",
              label: "015",
            },
            {
              value: "018",
              label: "018",
            },
            {
              value: "021",
              label: "021",
            },
            {
              value: "024",
              label: "024",
            },
          ],
        },
        {
          value: "10天",
          label: "10天",
          children: [
            {
              value: "024",
              label: "024",
            },
            {
              value: "048",
              label: "048",
            },
            {
              value: "072",
              label: "072",
            },
            {
              value: "096",
              label: "096",
            },
            {
              value: "120",
              label: "120",
            },
            {
              value: "120",
              label: "120",
            },
            {
              value: "144",
              label: "144",
            },
            {
              value: "168",
              label: "168",
            },
            {
              value: "192",
              label: "192",
            },
            {
              value: "216",
              label: "216",
            },
            {
              value: "240",
              label: "240",
            },
          ],
        },
      ],
    };
  },
  computed: {
    yubaoEndDuration() {
      if (!this.startTime) {
        return [];
      }
      return this.yubaoDurationOptions.find(
        (item) => item.value == this.startTime
      ).children;
    },
  },
  methods: {
    async query() {
      let options = {};
      if (this.date) {
        console.log(this.date);
        const beginTime = moment(this.date).format("YYYY-MM-DD HH:mm:ss");
        options.beginTime = beginTime;
      }
      if (this.yunBaoCount) {
        options.timechar = this.yunBaoCount;
      }
      if (this.endTime) {
        options.ntimes = this.endTime;
      }
      //智能网格
      if (this.dataTypeRadio == '1') {
        //网格
        options.type = "ER03";
        let res;
        //网格显示
        if(this.mapShowOfType == '1'){
          res = await getYuBaoInfo(options);
        }
        //填色显示
        else{
          res = await getFactsGrid(options);
        }
        this.$emit("handleYuBao",res.data,this.mapShowOfType);
        // console.log(gridImage)
      }
      //EC
      else if(this.dataTypeRadio == '2'){
        options.type = "2"
        const res = await getYuBaoInfo(options);
        console.log(res);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.choose {
  background-color: rgba(13, 40, 53, 0.4);
  z-index: 10;
  .box-card {
    width: 100%;
    height: 11rem;
    overflow:auto;
    background-color: rgba(13, 40, 53, 0.4);
    border: none;
    .chose-time {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      width: 100%;
      gap: 0px;
      span {
        color: white;
        font-size: 15px;
        width: 20%;
      }
      .block {
        .picker {
          width: 100%;
          border: none;
          height: 35px;
          background-color: #3c6485;
          ::v-deep .el-range-input {
            border: none;
            background-color: #3c6485;
          }
          
        }
      }
      ::v-deep .el-input--prefix .el-input__inner{
        height: 30px;
      }
      ::v-deep .el-input__icon{
        line-height: 30px;
      }
      ::v-deep .el-input__inner {
        width: 300px;
      }
    }
    .chose-count {
      margin-top: 0.5rem;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      //   gap: 1rem;
      span {
        color: white;
        font-size: 15px;
        width: 20%;
      }
      ::v-deep .el-input__inner{
        width: 300px;
        height: 30px;
      }
    }
    .chose-duration {
      margin-top: 0.5rem;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      gap: 1rem;
      span {
        color: white;
        font-size: 15px;
        width: 20%;
      }
      div {
        display: flex;
        justify-content: flex-start;
        gap: 1rem;
        align-items: center;
      }
      ::v-deep .el-input__inner{
        height: 30px;
      }
    }

    //数据类型
    .data-type,
    .show-map {
      display: flex;
      margin-top: 1rem;
      //   gap: 1rem;
      span {
        color: white;
        font-size: 15px;
        width: 25%;
      }
      div {
        display: flex;
        justify-content: space-between;
      }
    }
    .query {
      display: flex;
      justify-content: center;
      margin-top: 0.5rem;
    }
  }
}
::v-deep .el-input__inner {
  background-color: #3c6484;
  color: white;
  border: none;
  width: 8.5rem;
  // height: 40px;
}
.start-time ::v-deep .el-input__inner {
  width: 15rem;
}
</style>
